import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    Button,
    Modal,
} from 'antd-mobile';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";
import logisticsSvg from "../../assets/img/logistics.svg";

class SearchOrderItem extends Component {

    cancelOrder = (orderItem) => {
        // 如果为待收货状态需要跳转找orderCancel页面
        if (orderItem.orderState === 30) {
            this.props.dispatch(routerRedux.push({
                pathname:`/orderCancel/${orderItem.orderId}`
            }))
            return
        }
        Modal.alert('提示', '是否取消订单', [
            {text: '取消'},
            {
                text: '确定',
                onPress: () => {
                    if (orderItem.orderState === 20) {
                        console.log(orderItem)
                        let obj = {
                            id: orderItem.orderId,
                            refundAmount: orderItem.orderAmount,
                        }
                        this.props.dispatch({type:"orderList/refundEFF",obj: obj})
                            .then((result)=>{
                                if(result.code==200){
                                    Toast.info(result.msg,1,()=>{
                                        this.props.dispatch(routerRedux.replace({
                                            pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
                                            // pathname:`/afterSale`
                                        }))
                                    });
                                }else{
                                    Toast.fail(result.msg);
                                }
                            })
                    } else {
                        this.props.dispatch({type: 'orderList/CancleOrderEFF', obj: orderItem.orderSn}).then(ret => {
                            console.log("取消订单。。。", ret);
                            if (ret.code == 200) {
                                Toast.success(ret.msg, 1,()=>{
                                    this.props.status();
                                });

                            }
                        });
                    }
                }
            },
        ]);

    }

    gotoPay = (orderItem) => {
        const {paySn, orderAmount,orderSn} = orderItem;
        if (orderItem) this.props.dispatch(routerRedux.push({pathname: `/payMent/${[orderAmount,orderSn , paySn]}`}))

    }
    gotoComment = (v,saveType) => {
        this.props.dispatch({ type:'orderList/addCartOrBuyEFF', obj: { saveType:saveType,goodsId: v.orderGoodsEntityList[0].goodsId, specId: v.orderGoodsEntityList[0].specId } }).then(result=>{
            if (result.code == 200) {
                if(saveType==1){
                    this.props.dispatch(routerRedux.push({
                        pathname:`/order`
                    }))
                }else {
                    Toast.success(result.msg, 1.5);
                }

            } else {
                Toast.fail(result.msg, 1.5);
            }
        });
    }

    // 确认订单
    finishorder = (v) => {
        const {refresh} = this.props;
        Modal.alert('提示', '是否确认收货', [
            {text: '取消'},
            {
                text: '确定',
                onPress: () => {
                    this.props.dispatch({type:'orderList/FinishOrderEFF',obj:v.orderSn}).then((r)=>{
                        if(r.code==200){
                            Toast.success(r.msg, 1.5, ()=>{
                                refresh()
                            });
                        } else {
                            Toast.fail(r.msg, 1.5);
                        }
                    })
                }
            },

        ]);
    }


    render() {
        const {v} = this.props;
        let orderStatus = '';
        let showCancelBtn = false;
        let showAtferSellBtn=false;
        let showPayBtn = false;
        let showCommentBtn = false;
        let showCommentBtn1 = false;
        let showAtferSellCheckBtn = false;
        // 删除按钮
        let showDelectBtn = false;
        // 确认收货
        let showCompleteBtn = false;
        // 查看物流
        let showViewDeleveryBtn = false;
        // 详情跳转数据。。。
        let inquire = {};

        let iconState = 1;

        switch (v.orderState) {
            case 0:
                orderStatus = '已取消';
                showCommentBtn1 = true;
                break;
            case 10:
                orderStatus = '等待付款'
                showCancelBtn = true;
                showPayBtn = true;
                break;
            case 15:
                // if(v.orderType==20){
                //     orderStatus = '待成团';
                //     showAtferSellBtn = false;
                // }else if(v.orderType==30){
                //     orderStatus = '众筹中';
                //     showAtferSellBtn = false;
                // }else {
                orderStatus = '已支付';
                showAtferSellBtn = true;
                // }

                break;
            case 20:
                // if(v.lockState==0){
                orderStatus = '待发货';
                // 显示的按钮不对。。。
                // showAtferSellBtn = true;
                showCancelBtn = true;
                // }else if(v.lockState==1){
                //     orderStatus = '退款申请中';
                //     showAtferSellCheckBtn = true;
                // }
                break;
            case 30:
                orderStatus = '待收货'
                showViewDeleveryBtn = true;
                showCompleteBtn = true;
                break;
            case 40:
                orderStatus = '已完成'
                // if (v.evaluationStatus != 1) {
                showCommentBtn = true;
                // }
                showCommentBtn1 = true;
                break;
            case 50:
                orderStatus = '已提交'
                showCancelBtn = true;
                break;
            case 60:
                orderStatus = '待发货'
                break;
            case 90:
                orderStatus = '已取消';
                showCommentBtn1 = true;
                break;
            default:
                break;
        }
        // console.warn(v.barterState, v.refundState, +v.returnState, 'v 数据。。。');
        // console.warn(!!v.barterState, !!v.refundState, !!+v.returnState, 'v 数据。。。');
        // 0 换货, 1 退货，2 退款



        if (v.orderState != 40) {
            if (+v.returnState) {
                console.warn(v.returnState, v.returnId, 'Id');
                orderStatus = '售后中...';
                iconState = 0;
                showAtferSellCheckBtn = true;
                showCommentBtn=false;
                showCommentBtn1=false;
                showCancelBtn = false;
                showViewDeleveryBtn = false;
                showCompleteBtn = false;
                inquire = {pathname: `/returnDetail/${v.returnId},1`};
            }
            if (+v.refundState) {
                console.warn(v.refundState, v.refundId, 'Id');
                orderStatus = '售后中...';
                showAtferSellCheckBtn = true;
                showCommentBtn=false;
                iconState = 0;
                showCancelBtn = false;
                showCommentBtn1=false;
                showViewDeleveryBtn = false;
                showCompleteBtn = false;
                inquire = {pathname: `/returnDetail/${v.refundId},2`};
            }

            if (v.barterState == 80 || v.barterState == 90) {
                iconState = 0;
                orderStatus = '售后中...';
                showAtferSellCheckBtn = true;
                showCommentBtn=false;
                showCancelBtn = false;
                showCommentBtn1=false;
                showViewDeleveryBtn = false;
                showCompleteBtn = false;
                inquire = {pathname: `/returnDetail/${v.barterId},0`};
            }
        }

        // console.log(showCommentBtn1, "orderItem.js....................");
        return <div className='orderitem'>
            <WhiteSpace></WhiteSpace>
            <WingBlank>
                <Flex justify='between' style={{height: '0.8rem'}}>
                    <Flex style={{color: '#252525', fontSize: '0.24rem', lineHeight: '0.8rem'}} onClick={()=>{
                        v.storeId!=0?this.props.dispatch(routerRedux.push({
                            pathname: `/storesShow/${v.storeId}`
                        })):''
                    }}>
                        <Icon className="dianpu_logo" type={dianpusvg.id} ></Icon>
                        &nbsp;&nbsp;{v.storeName}
                        {/* 更改图标的类型。。。。。。。。。。0：退货中。。。。 */}
                        {v.storeId != 0 ? <Icon className="right" type={iconState ? rightsvg.id : rightsvg.id} style={{width:"5%"}}></Icon>:""}

                    </Flex>
                    {v.orderState==10 || v.orderState==30?
                        <div className="paystaus" style={{color: '#ff0036', fontSize: '0.24rem'}}>{orderStatus}</div>:
                        <div className="paystaus" style={{color: '#666', fontSize: '0.24rem'}}>{orderStatus}</div>}
                </Flex>
                {
                    0 ? <p style={{color: '#6BA820', position: 'relative', paddingLeft: '.8rem'}}><Icon style={{position: 'absolute', left: '.1rem', top: '-.06rem'}} type={ logisticsSvg.id }/>{ '此时的物流消息。。。' }</p> : ''
                }
                <WingBlank>
                    {v.orderGoodsEntityList.map((item,i)=>{
                        if(v.orderGoodsEntityList.length>1){
                            return <NoLazyImg src={item.goodsImage} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem",padding:".2rem"}}  key={i} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${item.orderId}`,
                                }));
                            }}/>
                        }else{
                            return <Flex style={{padding:".2rem 0"}} key={i} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${item.orderId}`,
                                }));
                            }}>
                                <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                    <NoLazyImg src={item.goodsImage} style={{width:"2rem",height:"2rem"}}/>
                                </div>

                                <div>
                                    <p style={{lineHeight:".4rem",marginBottom:".5rem"}}>{item.goodsName}</p>
                                    <p style={{color:"#999"}}>{item.specInfo}</p>
                                </div>
                            </Flex>
                        }
                    })}
                </WingBlank>

                <WhiteSpace></WhiteSpace>
                <Flex justify='end'>
                    <div style={{marginRight:".15rem"}}>共 <span>{v.goodsNum}</span>件商品</div>
                    <div style={{color: '#252525'}}>实付款: {`￥${v.orderAmount}`}</div>
                </Flex>
                <WhiteSpace style={{borderBottom:"1px solid #999"}}></WhiteSpace>
                <Flex justify='end' style={{marginTop:".2rem"}}>


                    <div className="orderItemBtn">

                        {
                            showAtferSellBtn && <Button
                                // onClick={(e) => this.cancelOrder(v)}
                                onClick={() => {
                                    console.log(v, "orderItem................");
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/EvaluateAndAfter/${v.orderId}/${1}`
                                    }))
                                }}
                                type='ghost' style={{marginLeft: '0.1rem',borderRadius:".45rem"}} size='small' inline>申请售后</Button>
                        }
                        {
                            showAtferSellCheckBtn && <Button
                                onClick={(e) => {
                                    this.props.dispatch(routerRedux.push({
                                        // pathname:`/EvaluateAndAfter/${v.orderId}/${1}`
                                        pathname: `/afterSale?type=1`
                                    }))
                                }}
                                type='ghost' style={{marginLeft: '0.1rem',borderRadius:".45rem"}} size='small' inline>售后查询</Button>
                        }
                        {
                            showPayBtn && <Button
                                onClick={(e) => this.gotoPay(v)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline>去支付</Button>
                        }
                        {
                            showCommentBtn && <Button size='small' inline onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname:`/EvaluateAndAfter/${v.orderId}/${0}`
                                }))
                            }}
                                                      style={{marginLeft: '0.1rem',borderRadius:".45rem"}}>评价晒单</Button>
                        }
                        {
                            showCommentBtn1 && <Button
                                onClick={(e) => this.gotoComment(v,1)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline>再次购买</Button>
                        }
                        {
                            showViewDeleveryBtn && <Button
                                // onClick={(e) => this.gotoDelivery(v)}
                                onClick={e => {
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/orderTrack/${v.shippingCode}`
                                    }))
                                }}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}}  size='small' inline>查看物流</Button>
                        }
                        {
                            showCompleteBtn && <Button
                                onClick={(e) => this.finishorder(v)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >确认收货</Button>
                        }
                        {
                            showCancelBtn && <Button
                                onClick={(e) => this.cancelOrder(v)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >取消订单</Button>
                        }

                        {
                            showDelectBtn && <Button
                                onClick={(e) => this.cancelOrder(v)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >删除订单</Button>
                        }

                        {
                            !!0 && '取消售后申请。暂无接口。。。' && <Button
                                onClick={(e) => this.cancelOrder(v)}
                                style={{marginLeft: '0.1rem',borderRadius:".45rem"}} type='ghost' size='small' inline >取消申请</Button>
                        }


                    </div>
                </Flex>
                <WhiteSpace></WhiteSpace>
            </WingBlank>
            <WhiteSpace style={{backgroundColor: '#F7F7F7'}}></WhiteSpace>
        </div>
    }
}

export default connect(({ orderList }) => ({ orderList }))(SearchOrderItem);